
<template>
  <div class="execution">
    <basic-container>

      <el-tabs v-model="activeName" type="card" @tab-click="handleClickhandleClick">
        <el-tab-pane label="08:00:00场" name="first">
          <el-row>
            <el-col :span="5" v-for="(o, index) in this.tableData "  :offset="index > 0 ? page.pageSize : 0">
              <el-card :body-style="{ padding: '20px' }">
                <span style="color: red">{{o.title}}限时秒杀</span><br>
                <img :src="o.pic" class="image" style="width:230px" height="320px">
                <div style="width: 280px;" >
                  <p>倒计时：{{hour}}:{{minute}}:{{second}}</p>
                  <span style="size: A4" >{{o.name}}</span><br>
                  <span style=" text-decoration: line-through;">原价:￥{{o.oprice}}</span><br>
                  <span v-if="o.pprice==0 ||o.pprice==null">现价:￥{{o.price}}</span>
                  <span v-if="o.pprice!=0 &&o.pprice!=null">现实优惠价:￥{{o.price}}</span><br>
                  <span style="color: red">{{o.startDate}}开抢</span><br>
                  <el-button type="text" @click="miaosha(o.id)" class="button" v-if="ad==1">开始秒杀</el-button>
                  <el-button type="text" class="button" v-if="ad==0">即将开始</el-button>
                  <el-button type="text" class="button" v-if="ad==2">已过抢购时间</el-button>
                </div>

              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="10:00:00场" name="secondss">
          <el-row>
            <el-col :span="5" v-for="(o, index) in this.tableData "  :offset="index > 0 ? page.pageSize : 0">
              <el-card :body-style="{ padding: '20px' }">
                <span style="color: red">{{o.title}}限时秒杀</span><br>
                <img :src="o.pic" class="image" style="width:230px" height="320px">
                <div style="width: 280px;" >
                  <p>倒计时：{{hour}}:{{minute}}:{{second}}</p>
                  <span style="size: A4" >{{o.name}}</span><br>
                  <span style=" text-decoration: line-through;">原价:￥{{o.oprice}}</span><br>
                  <span v-if="o.pprice==0 ||o.pprice==null">现价:￥{{o.price}}</span>
                  <span v-if="o.pprice!=0 &&o.pprice!=null">现实优惠价:￥{{o.price}}</span><br>
                  <span style="color: red">{{o.startDate}}开抢</span><br>
                  <el-button @click="miaosha(o.id)" type="text" class="button"  v-if="ad==1">开始秒杀</el-button>
                  <el-button type="text" class="button" v-if="ad==0">即将开始</el-button>
                  <el-button type="text" class="button" v-if="ad==2">已过抢购时间</el-button>
                </div>

              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="12:00:00场" name="third">
          <el-row>
            <el-col :span="5" v-for="(o, index) in this.tableData "  :offset="index > 0 ? page.pageSize : 0">
              <el-card :body-style="{ padding: '20px' }">
                <span style="color: red">{{o.title}}限时秒杀</span><br>
                <img :src="o.pic" class="image" style="width:230px" height="320px">
                <div style="width: 280px;" >
                  <p>倒计时：{{hour}}:{{minute}}:{{second}}</p>
                  <span style="size: A4" >{{o.name}}</span><br>
                  <span style=" text-decoration: line-through;">原价:￥{{o.oprice}}</span><br>
                  <span v-if="o.pprice==0 ||o.pprice==null">现价:￥{{o.price}}</span>
                  <span v-if="o.pprice!=0 &&o.pprice!=null">现实优惠价:￥{{o.price}}</span><br>
                  <span style="color: red">{{o.startDate}}开抢</span><br>
                  <el-button type="text" @click="miaosha(o.id)" class="button" v-if="ad==1">开始秒杀</el-button>
                  <el-button type="text" class="button" v-if="ad==0">即将开始</el-button>
                  <el-button type="text" class="button" v-if="ad==2">已过抢购时间</el-button>
                </div>

              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="14:00:00场" name="fourth">
          <el-row>
            <el-col :span="5" v-for="(o, index) in this.tableData "  :offset="index > 0 ? page.pageSize : 0">
              <el-card :body-style="{ padding: '20px' }">
                <span style="color: red">{{o.title}}限时秒杀</span><br>
                <img :src="o.pic" class="image" style="width:230px" height="320px">
                <div style="width: 280px;" >
                  <p>倒计时：{{hour}}:{{minute}}:{{second}}</p>
                  <span style="size: A4" >{{o.name}}</span><br>
                  <span style=" text-decoration: line-through;">原价:￥{{o.oprice}}</span><br>
                  <span v-if="o.pprice==0 ||o.pprice==null">现价:￥{{o.price}}</span>
                  <span v-if="o.pprice!=0 &&o.pprice!=null">现实优惠价:￥{{o.price}}</span><br>
                  <span style="color: red">{{o.startDate}}开抢</span><br>
                  <el-button type="text" @click="miaosha(o.id)" class="button" v-if="ad==1">开始秒杀</el-button>
                  <el-button type="text" class="button" v-if="ad==0">即将开始</el-button>
                  <el-button type="text" class="button" v-if="ad==2">已过抢购时间</el-button>
                </div>

              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="16:00:00场" name="five">
          <el-row>
            <el-col :span="5" v-for="(o, index) in this.tableData "  :offset="index > 0 ? page.pageSize : 0">
              <el-card :body-style="{ padding: '20px' }">
                <span style="color: red">{{o.title}}限时秒杀</span><br>
                <img :src="o.pic" class="image" style="width:230px" height="320px">
                <div style="width: 280px;" >
                  <p>倒计时：{{hour}}:{{minute}}:{{second}}</p>
                  <span style="size: A4" >{{o.name}}</span><br>
                  <span style=" text-decoration: line-through;">原价:￥{{o.oprice}}</span><br>
                  <span v-if="o.pprice==0 ||o.pprice==null">现价:￥{{o.price}}</span>
                  <span v-if="o.pprice!=0 &&o.pprice!=null">现实优惠价:￥{{o.price}}</span><br>
                  <span style="color: red">{{o.startDate}}开抢</span><br>
                  <el-button type="text" @click="miaosha(o.id)" class="button" v-if="ad==1">开始秒杀</el-button>
                  <el-button type="text" class="button" v-if="ad==0">即将开始</el-button>
                  <el-button type="text" class="button" v-if="ad==2">已过抢购时间</el-button>
                </div>

              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="18:00:00场" name="six">
          <el-row>
            <el-col :span="5" v-for="(o, index) in this.tableData "  :offset="index > 0 ? page.pageSize : 0">
              <el-card :body-style="{ padding: '20px' }">
                <span style="color: red">{{o.title}}限时秒杀</span><br>
                <img :src="o.pic" class="image" style="width:230px" height="320px">
                <div style="width: 280px;" >
                  <p>倒计时：{{hour}}:{{minute}}:{{second}}</p>
                  <span style="size: A4" >{{o.name}}</span><br>
                  <span style=" text-decoration: line-through;">原价:￥{{o.oprice}}</span><br>
                  <span v-if="o.pprice==0 ||o.pprice==null">现价:￥{{o.price}}</span>
                  <span v-if="o.pprice!=0 &&o.pprice!=null">现实优惠价:￥{{o.price}}</span><br>
                  <span style="color: red">{{o.startDate}}开抢</span><br>
                  <el-button type="text" @click="miaosha(o.id)" class="button" v-if="ad==1">开始秒杀</el-button>
                  <el-button type="text" class="button" v-if="ad==0">即将开始</el-button>
                  <el-button type="text" class="button" v-if="ad==2">已过抢购时间</el-button>
                </div>

              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="20:00:00场" name="seven">
          <el-row>
            <el-col :span="5" v-for="(o, index) in this.tableData "  :offset="index > 0 ? page.pageSize : 0">
              <el-card :body-style="{ padding: '20px' }">
                <span style="color: red">{{o.title}}限时秒杀</span><br>
                <img :src="o.pic" class="image" style="width:230px" height="320px">
                <div style="width: 280px;" >
                  <p>倒计时：{{hour}}:{{minute}}:{{second}}</p>
                  <span style="size: A4" >{{o.name}}</span><br>
                  <span style=" text-decoration: line-through;">原价:￥{{o.oprice}}</span><br>
                  <span v-if="o.pprice==0 ||o.pprice==null">现价:￥{{o.price}}</span>
                  <span v-if="o.pprice!=0 &&o.pprice!=null">现实优惠价:￥{{o.price}}</span><br>
                  <span style="color: red">{{o.startDate}}开抢</span><br>
                  <el-button type="text" @click="miaosha(o.id)" class="button" v-if="ad==1">开始秒杀</el-button>
                  <el-button type="text" class="button" v-if="ad==0">即将开始</el-button>
                  <el-button type="text" class="button" v-if="ad==2">已过抢购时间</el-button>
                </div>

              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>



    </basic-container>





  </div>
</template>

<script>
import {pmslist,ms,addorder} from '@/api/flash/smsflashpromotion'
import {addCart,list} from '@/api/product/pmsproduct'
import {friendlyDate} from "@/config/util";
import store from "@/store";
export default {

  name: 'smsflashpromotion',
  data() {
    return {
      hours: 0,
      minutes: 0,
      seconds: 0,
      time:'2021/07/30 08:00:00',
      number:0,
      ad:0,

      activeName: 'first',
      imageUrl:'',
      a:0,
      tableData: [],
      total: 0, // 总页数

      page: {
        startDate:'08:00:00',
      },
      id:{
        id:''
      },
      tableLoading: false,
      form:{
        id:0
      },
      dialogVisible:false
    }
  }, mounted() {
    this.add();
  },

  methods: {
    miaosha(val){
      console.log(val)
      this.id.id=val;
      ms(this.id).then(response => {
        console.log(response)
        if (response.data>0){
          alert("您已抢购成功")
          var user=this.$store.state.user.userInfo;
          console.log(user.username+"名称"+user.userId+"用户ID"+val+"商品ID");
          this.axios.get("http://localhost:8080/generator/smsflashpromotion/addorder/?id="+val+"&username="+user.username+"&userId="+user.userId).then((response) => {
            alert("生成订单成功");
          })
          this.$router.push({name:'订单列表'})

        }else if(response.data<0){
          alert("已抢光")
        }else{
          alert("抱歉,没抢到哦!!!")
        }
      })
    },
    handleClickhandleClick(tab, event) {
      console.log(tab, event);
      console.log(tab.label)

      var sb=tab.label;
      sb=sb.substr(0,sb.length-1);
      console.log(sb)
      this.page.startDate=sb;
      var daw="2021/07/30 "+sb
      console.log(daw)
      //秒杀时间
      var ss=new Date(daw).getTime();
      //当前时间
      var se=new Date().getTime();
      //当前时间+两个小时
      var sd=new Date(daw).getTime()+7200000;
      console.log(sd)
      console.log(se)
      console.log(ss)
      sd=sd-ss;
      se=se-ss;
      console.log(sd)
      console.log(se)
      if (se>0&&se>sd) {
        this.ad=2;
        console.log("已过时")
        this.hours=0;
        this.seconds=0;
        this.minutes=0;
        this.getList(this.page);
      }else if (se>0 &&se<sd){
        this.ad=1;
      }else{
        this.ad=0;
        if (this.a<1){
          this.add();
          this.a=this.a+1;
        }
        se=Math.abs(se)
        console.log(se)
        se=se/1000;

        this.getTime(se)
      }

      if (this.ad==1){
        if (this.a<1){
          this.add();
          this.a=this.a+1;
        }
        sd=sd/1000
        se=se/1000;
        sd=sd-se;
        console.log(sd+"aaaaa")
        this.getTime(sd)
      }





    },
    num(n) {
      return n < 10 ? '0' + n : '' + n
    },
    // 倒计时函数
    add() {
      let time = window.setInterval( ()=> {
        if (this.hours !== 0 && this.minutes === 0 && this.seconds === 0) {
          this.hours -= 1;
          this.minutes = 59;
          this.seconds = 59;
        } else if (this.hours === 0 && this.minutes !== 0 && this.seconds ===
          0) {
          this.minutes -= 1;
          this.seconds = 59;
        } else if (this.hours === 0 && this.minutes === 0 && this.seconds ===
          0) {
          this.seconds = 0
          window.clearInterval(time)
        } else if (this.hours !== 0 && this.minutes !== 0 && this.seconds ===
          0) {
          this.minutes -= 1;
          this.seconds = 59;
        } else {
          this.seconds -= 1;
        }
      }, 1000)
    },
    getList(){
      pmslist(this.page).then(response => {
        console.log(response.data.total)
        this.tableData = response.data;
      })
    },
    getTime(ss){
      console.log(Math.floor(ss/60))
      console.log(ss/60)
      this.hours=Math.floor(ss/3600)
      console.log(this.hours)
      ss=ss-(Math.floor(ss/3600)*3600);
      this.minutes=Math.floor(ss/60);
      ss=ss-(Math.floor(ss/60)*60);
      this.seconds=Math.ceil(ss)
      this.getList(this.page);
    }

  },created() {

    var ss=new Date(this.time).getTime();
    var se=new Date().getTime();
    var sd=new Date(this.time).getTime()+7200000;
    console.log(sd)
    console.log(se)
    console.log(ss)
    sd=sd-ss;
    se=se-ss;
    console.log(sd)
    console.log(se)
    if (se>0 &&se>sd) {
      this.ad=2;
      this.getList(this.page);
    }else if (se>0 &&se<sd){
      this.ad=1;
    }else{
      this.ad=0;
      se=se/1000;
      this.getTime(se)
    }

    if (this.ad==1){

      sd=sd/1000
      se=se/1000;
      sd=sd-se;
      console.log(sd+"aaaaa")
      this.getTime(sd)
    }


  },
  watch: {
    // 监听数值变化
    second: {
      handler(newVal) {
        this.num(newVal)
        console.log(this.seconds)
        console.log(this.minutes);
        if (this.seconds==0 && this.minutes==0) {
          if(this.ad==0){
            this.ad=1;
            this.getList();
            this.hours=1;
            this.minutes=59;
            this.seconds=59;
          }

        }
      }
    },
    minute: {
      handler(newVal) {
        this.num(newVal)
      }
    },
    hour: {
      handler(newVal) {
        this.num(newVal)

      }
    }
  },
  computed: {
    // 初始化数据
    second() {
      return this.num(this.seconds)
    },
    minute() {
      return this.num(this.minutes)
    },
    hour() {
      return this.num(this.hours)
    }
  }

}
</script>
<style>

</style>
